﻿Ext.define ('rangoaqui.view.phone.Perfil', 
{		
		extend: 'Ext.Container',
		alias: 'widget.PerfilPage',
		requires: [
			'Ext.List'
		],
		config: 
			{
				items: 
				[	
						 {
							xtype: 'toolbar',
							docked: 'top',
							ui: 'light',
							itemId: 'perfil_title_bar',
							title: '&nbsp;&nbsp;Perfil',
							items: [
								{
									xtype: 'button',
									text: 'Voltar',
									action: 'goHome',
									ui: 'back'
								},
								{xtype: 'spacer'},
								//{
								//	xtype: 'label',
									//html: "<span style='color: white; font-weight: bold'>Dados da Casa&nbsp;&nbsp;</span>"
								//}
								
							]
						},						
						{
							xtype: 'tabpanel',
							plugins: 'swipetabs',
							height: '100%',
							tabBarPosition: 'top',
							tabBar : {
								layout : {
									pack : 'center'
								}
							},
							defaults: {
								styleHtmlContent: true
							},
							items: [
								{ 
									title: 'Perfil',
									layout: {
													type : 'vbox',
													pack: 'top',
													align: 'center'
									},
									width: '100%',
									items:
										[
											{
												xtype: 'panel',
												itemId: 'user_image',
												tpl: 
													[
														"<div class='estabelecimento' style='width:100%'>",
															"<div class='round' style='background: url({url_img}) no-repeat;'></div>",
														"</div>"
													]
											},
											{	
												itemId: 'user_data',
												xtype: 'panel',
												tpl: [
														"<div class='estabelecimento'>",
															"<div class='dados' style='width:100%;margin-left:0'>",
															"<p class='nome' style='font-size:1.3em'>{nm_usuario}</p>",
															"<p><span class='nome'>Pontos:</span> <span class='bt_blue' style='color:white;font-size:1.3em'>{num_pontos} <img src='resources/img/pontos.png'/></p>",
															"<p></span><span class='nome'>Rangos:</span> <span class='bt_red' style='color:white;font-size:1.3em'>{num_rangos}<img src='resources/img/garfo.png'/></span></p>",											
															"</div>",
														"</div>"
												] // template
											}
										],//items-Perfil
																	
								},  // Perfil
								{ 
									title: 'Cupons', 
									layout: {
										type : 'vbox',
										pack: 'top',
										align: 'center'
									},
									width: '100%',
									items: [
											  		{
														xtype: 'label',
														itemId: 'lb_pontos',
														style: 'margin-top: 20px; margin: auto; font-size: 25px;text-align: center;',
														tpl: ['Você tem {num_pontos} pontos!'],
														cls: 'laranja_forte',
														padding: '10px'
													},
													{
														xtype: 'button',
														style: 'margin: auto',
														text: 'Como retiro meus pontos?',
														width: '15em',
														ui: 'comeai_blue',
														padding: '10px'
													},	
													{
														xtype: 'label',
														cls: 'laranja_forte',
														style: 'text-align: center; margin-top: 20px',
														html: '<span>Parabéns! Você recebeu novos cupons nos ultimos dias</span>'
													},
													{						
														xtype: 'dataview',
														store: 'Cupom',
														height: '25%',
														width: '100%',
														style: 'margin-top: 20px',
														scrollable: 'horizontal',
														emptyText: 'Opa.. você ainda não recebeu cupons',
														inline:{
															wrap: false
														},
														itemTpl: 
														[
															"<div class='cupom'>",
															"<span>{num_pontos} p.</span>",
															"</div>"
														]
													}											  						
									] // items-cupons
								}, // cupons
								{ 
									title: 'Rangos',
									items: [
										{
												xtype: 'list',
												height: '100%',
												scrollable: true,	
												title: 'Confira as últimas promoções',
												itemId: 'listaCupons',
												store: 'Cupom_all',
												emptyText : 'Nenhuma atividade até o momento :).',
												loadingText: 'Carregando suas últimas atividades...',
												itemTpl: [
																"<div class='cupom_lista'>",
																	"<img src='resources/img/cupom_ico.png'/>",
																	"<span class='dt'>{dt_data_cupon}</span>",
																	"<span class='pts'>{num_pontos} pontos</span>",
																"</div>"
															]
										}
									] //items-rangos
								} // rangos
							] //items tab panel
						}, //tabpanel
					 	
					
					{
						xtype: 'toolbar',
						docked: 'bottom',
						items: [
							{
								xtype: 'button',
								iconCls: 'facebook',
								iconAlign: 'top',
								action: 'showEditUser',
								text: 'Conectar'							
							},
							{
								xtype: 'spacer'
							},
							{
								xtype: 'button',
								iconCls: 'usuario',
								iconAlign: 'top',
								action: 'showEditUser',
								text: 'Meus dados'							
							},
							{
								xtype: 'button',
								iconCls: 'action',
								iconAlign: 'top',
								action: 'doLogout',
								text: 'Sair'					
							}							
						]
					}
								
				]
			},
			
			listeners: 
			{
				painted: function (element, options) {
				  
				}
			}
});